<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="购物车"></van-nav-bar>
    </div>
    <div class="cart-title">
      <van-button size="small" type="danger" @click="clearCart" plain>
        清空购物车
      </van-button>
    </div>
    <!-- 显示购物车的商品 -->
    <div class="cart-list">
      <div class="long-row" v-for="(item,index) in cartInfo" :key="index">
        <div class="long-img">
          <img :src="item.image" width="100%" alt="">
        </div>
        <div class="long-txt">
          <div class="title-goods">{{item.Name}}</div>
          <div class="long-count">
            <van-stepper v-model="item.count" />
          </div>
        </div>
        <div>
          <div class="title-price">￥{{item.price}}x{{item.count}}</div>
          <div>{{item.price*item.count |toMoney}}</div>
        </div>
      </div>
    </div>
    <!-- 显示总价格 -->
    <div class="totalMoney">
      商品总价格:￥{{totalMoney | toMoney}}
    </div>
  </div>
</template>

<script>
import {toMoney} from '@/filter/moneyFilter.js'
  export default {
    data() {
      return {
        cartInfo: [],
        isEmpty:false,
      }
    },
    filters:{
      toMoney(money){
        return toMoney(money)
      }
    },
    created(){
      this.getCartInfo()
    },
    computed:{
      totalMoney(){
        let allMoney = 0
        this.cartInfo.forEach((item,index)=>{
          allMoney += item.price*item.count
        })
        localStorage.cartInfo = JSON.stringify(this.cartInfo)
        return allMoney
      }
    },
    methods:{
      getCartInfo(){
        if(localStorage.cartInfo){
          this.cartInfo = JSON.parse(localStorage.cartInfo)
        }
        console.log(JSON.stringify(this.cartInfo))
        this.isEmpty = this.cartInfo.length>0? true:false
      },
      clearCart(){
        localStorage.removeItem('cartInfo')
        this.cartInfo = []
      }
    },
  }
</script>

<style scoped>
.cart-title{
  height: 2rem;
  background: #fff;
  line-height: 2rem;
  padding: 5px;
  text-align: right;
  border: 1px solid #e4e7ed;
}
.cart-list{
  background: white;
}
.long-row{
  display: flex;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #e4e7ed;
  font-size: .85rem;
  padding: .5rem;
  justify-content: center;
}
/* .long-row div{
  flex: 1;
} */
.long-img{
  flex: 6;
}
.long-txt{
  flex: 14;
  padding-left: 10px;
}
.title-goods{
  padding-top: 10px;
}
.title-price{
  flex: 4;
  padding: 10px;
}
.long-count{
  padding-top: 5px;
  /* background: white; */
}
.totalMoney{
  background: white;
  text-align: right;
  padding: 5px;
}
</style>